<template>
  <div class="footer">
    <div class="left">
      <input type="checkbox" v-model="allSelect" />
      <div>已完成{{ doneTotal }}/全部{{ total }}</div>
    </div>
    <button class="deleteBtn" @click="onClear">清除全部</button>
  </div>
</template>

<script>
export default {
  name: "TodoFooter",
  props: {
    todos: Array,
    onAllSelectChange: {
      type: Function,
      required: true,
    },
    onClear: {
      type: Function,
      required: true,
    },
  },
  computed: {
    total() {
      return this.todos.length;
    },
    doneTotal() {
      return this.todos.filter((todo) => todo.done).length;
    },
    allSelect: {
      get() {
        return this.total === this.doneTotal && this.total > 0;
      },
      set(value) {
        this.onAllSelectChange(value);
      },
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
    gap: 20px;
  }

  .deleteBtn {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    color: #fff;
    background-color: rgb(233, 69, 69);
    border: none;
  }
}
</style>
